<template>
  <div id="app">
    <component :is="componentId" v-if="componentId!==''" :View="componentId"  @loginState="loginSuccess" @register-change="componentId='Register'" @be-closed="componentId=''"></component>
    <div id="header" v-if="show.header">
      <div id="headerContain">
        <el-dropdown @command="handleCommand">
          <el-button  type="primary" size="mini">
            {{nowArea}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in areaList" :command="item" :key="index">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div id="account">
          <!--<a @click="componentId='Login'">登录</a>|-->
          <a @click="componentId='Register'" v-if="!personalCentreView">立即登录</a>
          <!--<router-link  to="/personal-centre" v-if="personalCentreView">{{phoneNum}},欢迎您</router-link>-->
          <router-link  to="/personal-centre" v-if="personalCentreView">个人中心</router-link>
        </div>
        <div id="nav">
          <!--<router-link class="navWord" to="/home" >首页</router-link>-->
          <router-link class="navWord" to="/rent">我要租房</router-link>
          <!--<router-link class="navWord"  to="/friends">合租伙伴</router-link>-->
          <a class="navWord" @click.stop="toFriendModule">合租伙伴</a>
          <router-link class="navWord"  to="/owner" @click.stop="toOwnerModule($event)">业主委托</router-link>
          <router-link class="navWord" to="/about">关于我们</router-link>
          <router-link class="navWord" to="/houseMap">地图找房</router-link>
          <router-link class="navWord" to="/APPDownload"><i class="el-icon-mobile-phone"></i> APP下载</router-link>
          <router-link class="personal-centre" to="/personal-centre"></router-link>
        </div>
      </div>
    </div>
        <div id="container">
      <router-view :nowArea="nowArea" @qqLoginState="loginSuccess"/>
    </div>
    <!--<div id="footer">-->
      <!--@scnu-->
    <!--</div>-->
  </div>


</template>

<script>
    import Login from './components/Login.vue';
    import Register from './components/Register.vue';
    export default {
      data() {
        return {
          areaList: ["不限","天河区","越秀区","海珠区","番禺区","花都区","白云区","黄埔区","萝岗区"],
          nowArea: '番禺区',
          componentId: "",
          personalCentreView:false,
          phoneNum:'',
          show:{
            header: true,
            friendModule:false
          }
        }
      },
      methods: {
        handleCommand(command) {
          this.nowArea = command;
        },
        loginSuccess(){
            if(document.cookie.indexOf('login_state=true')!== -1){
                this.componentId='';
                this.personalCentreView = true;
                if(this.show.friendModule===true){
                  this.$router.push('/friends');
                }
            }
        },
        toFriendModule(){
          if(document.cookie.indexOf('login_state=true')!== -1){
                this.$router.push('/friends');
                this.personalCentreView = true;
          }else {
            this.componentId  ='Register';
            this.show.friendModule = true;
          }
        }
        },
        components: {
          Login, Register
        },
        watch:{
        $route(to){
          this.show.header = !(to.name ==='friends'||to.name ==='houseMap'||to.name==='id-recognition');
          if(to.name==='owner'){
            if(document.cookie.indexOf('login_state=true')=== -1){
              this.componentId  ='Register';
              this.$router.go(-1);
            }else {
              let reg = /(^| )login_token=([^;]*)(;|$)/;
              let token = document.cookie.match(reg);
              this.$axios.post(this.Global.api + '/index.php/index/userInfo', this.$qs.stringify({token: token[2]}), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
                        if (res.status >= 200 && res.status < 300 && res.data.res === 0) {
                          if (res.data.data.isverify === 0) {
                            let r2 = confirm("请先进行实名认证");
                            if (r2 === true) {
                              this.$router.push('/id-recognition')
                            } else {
                              this.$router.go(-1);
                            }
                          } else if (res.data.data.isverify === 2) {
                            let r = confirm("实名审核中");
                            if (r === true) {
                              this.$router.go(-1);
                            }
                          }
                        }
                      }
              );
            }
          }
        }
        },
        created() {
          this.loginSuccess();
        },
        mounted() {
        }
      }
</script>

<style scoped>
  #app {
    /*overflow: hidden;*/
  }
  #header{
    width: 100%;
    min-width: 1000px;
    height: 65px;
    background: rgba(255,255,255,0.8);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #headerContain{
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
  }
  .navWord{
    display: inline-block;
    text-align: center;
    width: 110px;
    font-size: 16px;
    color: rgba(0,0,0,0.6);
  }
  .router-link-active{
    color: #ff0a60;
    font-weight: bold;
  }
  #nav a:hover{
    color: #ff0a60;
    font-weight: bold;
  }
  .navWord:link{
    text-decoration: none;
  }
  .navWord:nth-child(1){
    margin-left: 50px;
  }
  .navWord:nth-child(7){
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 600;
    font-size: 16px;
    width: 120px;
  }
  #nav{
    display: flex;
    align-items: center;
    position: relative;
    width: 900px;
    height: 70px;
  }
  .el-button--primary{
    background-color: white !important;
    border-color: #ff0a60 !important;
    color: black !important;
    font-size: 14px !important;
  }
  #header .el-dropdown{
    position: relative;
    margin-left: 10%;
  }
  #container{
    min-width: 1000px;
  }
  #footer{
    height: 30px;
    position: relative;
    width: 100%;
    display: flex;
    bottom: 0;
    justify-content: center;
    align-items: center;
    min-width: 1500px;
    background-color: rgba(0,0,0,0.1);
  }
  #account{
    position: relative;
    margin-left: 40px;
    width: 80px;
  }
  #account a{
    text-decoration: underline;
  }
</style>
